<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>商品页面</title>
    <link href="../lib/basic/css/bootstrap.min.css" rel="stylesheet">
    <link href="../lib/basic/css/demo.css" rel="stylesheet" type="text/css"/>
    <link href="../home/css/hmstyle.css" rel="stylesheet" type="text/css"/>
    <link type="text/css" href="../home/css/style.css" rel="stylesheet"/>
    <link href="../home/css/selldetail.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="../lib/basic/js/jquery-1.7.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../lib/elementui/1.4.3/theme-default/index.css">
    <script src="../common/js/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script src="../home/js/bootstrap.min.js"></script>
    <script src="../lib/vue/2.4.2/vue.js"></script>
    <script src="../common/js/distpicker.data.js"></script>
    <script src="../common/js/distpicker.js"></script>
    <script src="../common/js/main.js"></script>
    <script type="text/javascript" src="../home/js/jquery.imagezoom.min.js"></script>
    <script src="../lib/elementui/1.4.3/index.js"></script>
</head>
<body>
<div id="introduction">
    <!--顶部导航条 -->
    <iframe  MARGINWIDTH="0" MARGINHEIGHT="0" height="50px" scrolling="no"  width="100%" src="../home/otherHead.html"></iframe>

    <!--悬浮搜索框-->
    <div class="clear"></div>
    <b class="line" style="top:105px;"></b>
    <div class="listMain">

        <!--分类-->
        <div class="nav-table">
            <a href="search.html">
                <div class="long-title"><span class="all-goods">全部分类</span></div>
            </a>
            <div class="nav-cont">
                <ul>

                    <li class="qc" v-for="site in crosswiseNav">
                        <a v-bind:href="site.href">{{ site.name }}</a>
                    </li>
                </ul>
            </div>
        </div>
        <!--放大镜-->

        <div class="item-inform" style="margin-top: 20px;">
            <div class="clearfixLeft" id="clearcontent">
                <div class="box">
                    <div class="tb-booth tb-pic tb-s310" style="border: none">
                        <a v-bind:href="product.commodityPicture"><img v-bind:src="product.masterMap" :title="product.commodityName" alt="细节展示放大镜特效"
                                                                       v-bind:rel="product.masterMap"  class="jqzoom"/></a><!--v-bind:rel="product.commodityPicture"alt="细节展示放大镜特效"-->
                    </div>
                </div>

                <div class="clear"></div>
            </div>

            <div class="clearfixRight" style="width: 390px">

                <!--规格属性-->
                <!--名称-->

                <div class="tb-detail-hd">
                    <h1 style="word-break: break-all">
                        {{product.commodityName}}
                    </h1>
                </div>
                <div class="tb-detail-list">
                    <!--价格-->
                    <div class="tb-detail-price">
                        <li class="price iteminfo_price">
                            <dt>供货价</dt>
                            <dd><em>￥</em><b class="sys_item_price">{{product.commodityTrcPrc}}</b></dd>
                        </li>
                        <li class="price iteminfo_mktprice">
                            <dt>市场价</dt>
                            <dd><em>￥</em><b class="sys_item_mktprice">{{product.commodityMakPrc}}</b></dd>
                        </li>
                        <div class="clear"></div>
                    </div>
                    <div class="clear"></div>
                    <!--销量-->
                    <ul class="tm-ind-panel">
                        <li class="tm-ind-item tm-ind-sellCount canClick">
                            <div class="tm-indcon"><span class="tm-label">累计销量</span><span class="tm-count">{{product.salesGross}}</span>
                            </div>
                        </li>

                        <li class="tm-ind-item tm-ind-reviewCount canClick tm-line3" >
                            <div class="tm-indcon"><span class="tm-label">累计评价</span><span class="tm-count">{{product.evalusteNum}}</span>
                            </div>
                        </li>
                    </ul>
                    <div class="clear"></div>
                    <!--各种规格-->
            <div class="clear"></div>
            <!--活动	-->
            <div class="shopPromotion gold">
                <div class="hot">
                    <dt class="tb-metatit">优惠率</dt>
                    <div class="gold-list">
                        <p>{{product.discounts}}</p>
                    </div>
                </div>
                <div class="clear"></div>

            </div>
        </div>

        <div class="pay">
            <div class="pay-opt">
                <a href="home.html"><span class="am-icon-home am-icon-fw">首页</span></a>
                <a><span class="am-icon-heart am-icon-fw">收藏</span></a>
            </div>
            <li>
                <div class="clearfix tb-btn tb-btn-basket theme-login" :plain="true" v-on:click="onTouchAdd(product);">
                    <a id="LikBasket" title="加入购物车" href="javascript:;"><i></i>加入购物车</a>
                </div>
            </li>
        </div>
    </div>
    <div class="company" style="box-shadow: -10px 10px 10px #8888;background-color: #FFFFFF;height: 240px;">
        <div class="logo_name">
            <div><img style="width: 230px;height: 90px;" v-bind:src="merchant.companyLogo" :title="merchant.companyName"></div>
            <!--<span>甘肃锐智</span>-->
        </div>
        <div class="com_test" style="margin-left: 3px;"align="left">
            <div style="display: inline"><span style="font-weight: 900;">公司名称：</span></div>
            <div style="display: inline"><a href="javascript:void(0);"><span v-on:click="enterSell(merchant);" id="hoverDiv">{{merchant.companyName}}</span></a></div>
            <div>
                <span><a style="font-weight: 900;">联系电话：</a>{{merchant.tel}}</span>
            </div>
            <div>
                <span><a style="font-weight: 900;">经营模式：</a>{{merchant.businessModel}}</span>
            </div>
            <div id="affiliatedRegional">
                <span><a style="font-weight: 900;">所在地区：</a>{{merchant.affiliatedRegional}}</span>
            </div>
                <!--<div class="com_company_1" ><a href="#">进入店铺</a></div>
                <div class="com_company_2" ><a href="">关注店铺</a></div>-->
        </div>
    </div>
    <div class="clear"></div>

</div>
<div class="clear"></div>
<!-- introduce-->

<div class="introduce">

    <div class="introduceMain">
        <div class="am-tabs" data-am-tabs>
            <ul class="am-avg-sm-3 am-tabs-nav am-nav am-nav-tabs">
                <li class="am-active">
                    <a href="javascript:void(0);"><span class="index-needs-dt-txt">商品参数</span></a>
                </li>
                <li>
                    <a href="javascript:void(0);"><span class="index-needs-dt-txt">全部评价</span></a>
                </li>
            </ul>

            <div class="am-tabs-bd">

                <div class="am-tab-panel am-fade am-in am-active">
                    <div class="J_Brand">

                        <div class="attr-list-hd tm-clear">
                            <h4>产品参数：</h4></div>
                        <div class="clear"></div>

                        <ul id="J_AttrUL">
                            <li title="">品牌:&nbsp;{{product.brand}}</li>
                            <li title="">型号:&nbsp;{{product.model}}</li>
                            <li title="">商品代码:&nbsp;{{product.num}}</li>
                            <li title="">质保时间:&nbsp;{{product.quality}}个月</li>
                            <li title="">生产厂商:&nbsp;{{product.manufacturer}}</li>
                            <li title="" id="rests">其他说明:&nbsp;{{product.rests}}</li>
                            <li title="" id="title" v-if="product.rests.length>16" style="background-color: rgb(0, 0, 0); color: rgb(255, 255, 255); white-space:normal; border-radius: 4px;  min-height: 55px; position: absolute; top: 10px; left: 300px; z-index: 999; width: 320px; display: none;">{{product.rests}}</li>
                        </ul>

                        <div class="clear"></div>
                    </div>

                    <div class="details">
                        <div class="attr-list-hd after-market-hd">
                            <h4>商品细节</h4>
                        </div>
                        <div class="twlistNews" v-html="product.details">
                        </div>
                    </div>
                    <div class="clear"></div>

                </div>

                <div class="am-tab-panel am-fade" >

                    <div class="clear"></div>
                    <ul v-if="estimate==''">
                        <p>暂无该商品的相关评价</p>
                    </ul>
                    <ul class="am-comments-list am-comments-list-flip" v-for="est in estimate" >
                        <li class="am-comment" >
                            <!-- 评论容器 -->

                            <div class="am-comment-main">
                                <!-- 评论内容容器 -->
                                <header class="am-comment-hd">
                                    <!--<h3 class="am-comment-title">评论标题</h3>-->
                                    <div class="am-comment-meta">
                                        <!-- 评论元数据 -->
                                        <a  class="am-comment-author">{{est.userName}}</a>
                                        <!-- 评论者 -->
                                        评论于
                                        <time datetime="">{{est.createTime}}</time>
                                    </div>
                                </header>
                                <div class="am-comment-bd">
                                    <div class="tb-rev-item " data-id="255776406962">
                                        <div class="J_TbcRate_ReviewContent tb-tbcr-content ">
                                            {{est.content}}
                                        </div>
                                    </div>
                                </div>
                                <!-- 评论内容 -->
                            </div>
                        </li>
                    </ul>
                    <div class="clear"></div>
                    <div class="clear"></div>

                    <!--<div class="tb-reviewsft" style="margin-top: 30px;">
                        <div class="tb-rate-alert type-attention">购买前请查看该商品的 <a href="#" target="_blank">购物保障</a>，明确您的售后保障权益。
                        </div>
                    </div>-->

                </div>
            </div>

        </div>

        <div class="clear"></div>
        <iframe  MARGINWIDTH="0" MARGINHEIGHT="0" height="50px" width="100%" scrolling="no"  src="../home/otherFoot.html"></iframe>
    </div>

</div>
</div>
<!--菜单 -->
<div class=tip>
    <div id="sidebar">
        <div id="wrap">
            <div class="quick_toggle">
                <li class="qtitem">
                    <a href="#"><span class="kfzx"></span></a>
                    <div class="mp_tooltip">客服中心<i class="icon_arrow_right_black"></i></div>
                </li>
                <!--二维码-->
                <li class="qtitem">
                    <a href="#none"><span class="mpbtn_qrcode"></span></a>
                    <div class="mp_qrcode" style="display:none;"><img src="../lib/images/weixin_code_145.png"/><i
                            class="icon_arrow_white"></i></div>
                </li>
                <li class="qtitem">
                    <a href="#top" class="return_top"><span class="top"></span></a>
                </li>
            </div>

            <!--回到顶部 -->
            <div id="quick_links_pop" class="quick_links_pop hide"></div>
        </div>
    </div>
</div>
</div>
<script src="../charge/introduction.js"></script>
</body>
</html>
